<template>
	<!--  -->
	<view  class="music-head" :style="{height:navHeight }" >
		<view v-if="toshow==true" class="music-head-left" :style="{color: color,width:`${selfMenu.width}px`,height:`${selfMenu.height}px`,top:`${selfMenu.top}px`,left:leftbtn}" >
			<text class="iconfont icon-xiangzuo" @click="goBack"  ></text> 
			<text>|</text>
			<text class="iconfont icon-homefill" @click="goHome" :style="{color: color}" ></text>
		</view>
		<view class="title" :style="{marginTop:`${selfMenu.top+5}px`, height: `${selfMenu.height}px`,lineHeight: `${selfMenu.height}px`}"  >
			<text style="{color: #fff}" >{{title}}</text>
		</view>
	</view>
</template>

<script>
	import '@/common/css/iconfont.css'
	export default {
		name:"musichead",
		data() {
			return {
				selfMenu: {},
				scrllHeigt:0,
				screenWidth: 375,
				leftbtn: '7px'
			};
		},
		props: {
			title: {
				type:String,
				default: '自定义头组件'
			},
			toshow:{
				type: Boolean,
				default: false
			},
			color: {
				type: String,
				default: "black"
			}
		},
		methods: {
			goBack(){
				console.log("返回上一级")
				//uni.reLaunch跳转过来 navigateBack不能返回
				uni.navigateBack()
				// window.history.back()
			},
			goHome(){
				console.log("去往主页")
				// #ifndef H5
				uni.navigateTo({
					url:"/pages/index/index",
				})
				// #endif
				
				// #ifdef H5
				//去往主页 逻辑上可以销毁其他页面
				uni.reLaunch({
					url:"/pages/index/index",
				})
				// #endif
				
				
			}
		},
		computed: {
			navHeight() {
				console.log(this.$store.getters.navHeight + 'px')
				return this.$store.getters.navHeight + 'px'
				
			}
			
			
		},
		
		created() {
			this.selfMenu = this.$store.getters.WxMenuObj
			console.log(this.selfMenu)
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowWidth)
					this.screenWidth = res.windowWidth
				}
			})
			
		}
	}
</script>

<style scoped>
	.music-head{
		position: relative;
		width: 100%;
		/* height: 150rpx; */
		/* height: 56px; */
		font-size: 16px;
		text-align: center;
		color: #000000;
		z-index: 999;
		
	}
	.title{
		
		position: absolute;
		/* line-height: 150rpx; */
		white-space: nowrap;
		height: 30px;
		left: 50%;
		transform: translateX(-50%);
		overflow: hidden;
	}
	.music-head-left{
		
		position: absolute;
		box-sizing: border-box;
		display: flex;
		/* border: 1px solid rgba(255,255,255,.5); */
		color: #000;
		background-color:  rgba(0,0,0,0.2);
		justify-content: space-evenly;
		line-height: 32px; 
		border-radius: 16px;
		/* width: 90px;
		height: 30px;
		font-weight: 700;
		top: 25px;
		left: 8px;
		*/
	}
</style>
